<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-position百分比</title>
    <style>
        div{
            width: 260px;
            height: 260px;
            background-color: aqua;
            background-image: url("eg_bg_03.gif");
            background-repeat: no-repeat;
            background-position: 30% 30%;
            /*可以看到的效果是背景图片在div中的定位是30%
            但这个百分比所代表的偏移量实际上是div的（高\宽-图片的高\宽）*30%
            之所以是这样是这样的，背景图百分比定位时其最终效果是背景图的左上角30%处的点需要跟div左上角30%处的点重合，
            比如以横向偏移量为例，那么横向的偏移量就应该是div宽度的30%-背景图的30%
            所以偏移量=div宽*30%-背景图宽*30%=（div宽-背景图宽）*30%
            */
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>